<template>
  <div class="articleDetail">
    <mt-header>
      <mt-button icon="back" slot="left" @click="fromUrl">返回</mt-button>
    </mt-header>
    <div class="container">
      <div class="detail-title" v-text="title"></div>
      <div class="info">
        <p>{{updateTime|formatDate}}</p>
        <p v-text="teacher"></p>
      </div>
      <div class="content" v-text="content"></div>

      <div class="articleInfo">
        <span v-text="readingNum"></span>人已阅读
        <span v-if="collect">
          <span v-text="collectionNum"></span>人已收藏
        </span>
      </div>
      <div class="collect" @click="collect">
        <img src="../assets/like.png" v-show="!likeimg" class="islike" alt="">
        <img src="../assets/islike.png" v-show="likeimg" class="islike" alt="">
        <p class="articleInfo" v-show="!likeimg">点击收藏</p>
        <p class="articleInfo" v-show="likeimg">已收藏</p>
      </div>
    </div>

  </div>
</template>


<script>
  import {
    formatDate
  } from "../common/date.js";
  import {
    getArticle_Axios,
    dislikeArticle_Axios,
    likeArticle_Axios,
  } from './axios/api';
  export default {
    components: {},
    methods: {
      fromUrl() {
        this.$router.go(-1);
      },
      //获取文章详情
      getArticle: function (id) {
        let a_id = this.$route.query.id;
        let userId = this.userId;
        getArticle_Axios(a_id, userId).then(response => {
          let articleDetail = response.data.data;
          this.title = articleDetail.title;
          this.updateTime = articleDetail.updateTime;
          this.teacher = articleDetail.teacher;
          let content_ = articleDetail.content;
          this.content = articleDetail.content.replace(
            /<[^>]+>/g,
            ""
          );
          this.readingNum = articleDetail.readingNum;
          this.collectionNum = articleDetail.collectionNum;
          this.likeimg = articleDetail.collected;
        })
      },

      //收藏按钮
      collect: function (aid) {
        let a_id = this.$route.query.id;
        let userId = this.userId;
        if (this.likeimg == true) {
          //取消收藏文章
          dislikeArticle_Axios(a_id, userId)
            .then(response => {
              this.likeimg = !this.likeimg;
              this.collectionNum = this.collectionNum - 1;
              this.$vux.toast.show({
                text: "取消收藏成功",
                width: "15rem",
                time: 600
              });
            })
        } else {
          //收藏文章
          likeArticle_Axios(a_id, userId)
            .then(response => {
              this.likeimg = !this.likeimg;
              this.collectionNum = this.collectionNum + 1;
              this.$vux.toast.show({
                text: "收藏成功",
                width: "15rem",
                time: 600
              });
            })
        }
      },
      gobackArticle: function () {
        this.$router.push({
          path: "/Article"
        });
      }
    },
    data() {
      return {
        title: "",
        updateTime: "",
        teacher: "",
        content: "",
        readingNum: "",
        collectionNum: "",
        // formatDate: "",
        collected: "",
        likeinfo: true,
        likeimg: true,
        userId: sessionStorage.getItem('id'),

      };
    },
    filters: {
      formatDate(time) {
        var date = new Date(time);
        return formatDate(date, "yyyy-MM-dd");
        // return formatDate(date, "yyyy-MM-dd hh:mm");
      }
    },
    mounted() {
      this.getArticle();
    },
  };

</script>



<style lang="scss" scoped>
  .articleDetail {
    background-color: #fbf3d0;
    height: 100%;
    min-height: 100vh;
  }

  .container {
    padding: 20px;
    .detail-title {
      font-weight: bold;
      font-size: 20px;
      padding: 10px 0;
      text-align: center;
    }

    .info {
      display: flex;
      font-size: 14px;
      color: #aaaaaa;
      justify-content: space-between;
    }
    .content {
      text-align: left;
      margin: 20px 0;
      margin-bottom: 70px;
      text-indent: 2em;
      font-size: 15px;
      color: rgba(126, 83, 3, 0.973);
    }
    .articleInfo {
      text-align: left;
      margin: 20px 0;
      font-size: 14px;
    }
    .collect {
      display: flex;
      align-items: center;
      width: 100px;
      .islike {
        width: 30px;
        margin-right: 10px;
      }
    }
    .active {
      color: red;
      width: 50px;
    }
  }

</style>
